
<template>
  <div class="position-relative">
    <div class="rank-list-bg"></div>
    <div class="p-2">
      <div v-if="rankList&&rankList.length===0" class="d-flex justify-content-center"  style="color:#fff">暂无排名</div>
      <div :class="['rank-list', customClass] ">
        <div v-for="(item,i) in rankList" :key="i" class="d-flex  rank-list-item">
          <div class="d-flex align-items-center">
            <div v-if="i==0" class="rank-1"></div>
            <div v-if="i==1" class="rank-2"></div>
            <div v-if="i==2" class="rank-3"></div>
            <div v-if="i!==0&&i!==1&&i!==2" class="rank-default">{{i+1}}</div>
          </div>
          <div class="d-flex  align-items-center ml-2">
            <img :src="item.avatar | avatarUrl" class="small-avatar" alt="">
            <div class="ml-1">{{item.userName}}</div>
          </div>
          <div class="d-flex  align-items-center ml-auto text-center mr-2">
            <div>得分:{{item.score}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'
import { Getter, Action } from 'vuex-class'
@Component
export default class TeacherRank extends Vue {
  @Prop(String) customClass;
  @Action getTeacherRank;

  public get rankList () {
    return this.$store.state.teacher.ranks && this.$store.state.teacher.ranks.items
  }
  public async created () {
    if (this.rankList === null) {
      await this.getTeacherRank()
    }
  }
  public onShow () {}
}
</script>

<style lang="stylus" scoped>

</style>
